{% extends 'base.html' %}
{% load static %}

{% block title %}我的积分 - Meet活动聚{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'home' %}">首页</a></li>
                    <li class="breadcrumb-item active">我的积分</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- 积分概览 -->
    <div class="row mb-4">
        <div class="col-md-4 mb-3">
            <div class="card bg-primary text-white">
                <div class="card-body text-center">
                    <h5><i class="bi bi-wallet2"></i> 可用积分</h5>
                    <h2 class="display-4">{{ user_points.available_points }}</h2>
                    <p class="mb-0">立即兑换奖品</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-3">
            <div class="card bg-success text-white">
                <div class="card-body text-center">
                    <h5><i class="bi bi-graph-up"></i> 总获得积分</h5>
                    <h2 class="display-4">{{ user_points.total_points }}</h2>
                    <p class="mb-0">累计获得</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-3">
            <div class="card bg-info text-white">
                <div class="card-body text-center">
                    <h5><i class="bi bi-bag-check"></i> 已使用积分</h5>
                    <h2 class="display-4">{{ user_points.used_points }}</h2>
                    <p class="mb-0">成功兑换</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- 快速操作 -->
        <div class="col-lg-4 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">积分操作</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{% url 'points:rewards_shop' %}" class="btn btn-primary">
                            <i class="bi bi-shop me-2"></i>积分商城
                        </a>
                        <a href="{% url 'points:exchange_history' %}" class="btn btn-outline-primary">
                            <i class="bi bi-clock-history me-2"></i>兑换记录
                        </a>
                        <a href="{% url 'points:points_records' %}" class="btn btn-outline-secondary">
                            <i class="bi bi-list-check me-2"></i>积分记录
                        </a>
                    </div>
                </div>
            </div>

            <!-- 积分规则 -->
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">积分规则</h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0">
                        <li class="mb-2"><i class="bi bi-plus-circle text-success me-2"></i>创建活动：+10积分</li>
                        <li class="mb-2"><i class="bi bi-plus-circle text-success me-2"></i>参加活动：+5积分</li>
                        <li class="mb-2"><i class="bi bi-plus-circle text-success me-2"></i>活动签到：+5积分</li>
                        <li class="mb-2"><i class="bi bi-plus-circle text-success me-2"></i>发表评论：+2积分</li>
                        <li class="mb-0"><i class="bi bi-plus-circle text-success me-2"></i>评分活动：+3积分</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 最近记录 -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">最近积分记录</h5>
                    <a href="{% url 'points:points_records' %}" class="btn btn-sm btn-outline-primary">查看全部</a>
                </div>
                <div class="card-body">
                    {% if recent_records %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>类型</th>
                                    <th>积分变动</th>
                                    <th>描述</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for record in recent_records %}
                                <tr>
                                    <td class="text-nowrap">{{ record.created_at|date:"m-d H:i" }}</td>
                                    <td>
                                        <span class="badge bg-{% if record.points > 0 %}success{% else %}danger{% endif %}">
                                            {{ record.get_type_display }}
                                        </span>
                                    </td>
                                    <td>
                                        {% if record.points > 0 %}
                                        <span class="text-success">+{{ record.points }}</span>
                                        {% else %}
                                        <span class="text-danger">{{ record.points }}</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-truncate" style="max-width: 200px;" title="{{ record.description }}">
                                        {{ record.description }}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center py-4">
                        <i class="bi bi-clock-history text-muted display-4"></i>
                        <p class="text-muted mt-3">暂无积分记录</p>
                        <p class="text-muted">快去参与活动获取积分吧！</p>
                        <a href="{% url 'activities:activity_list' %}" class="btn btn-primary">去参与活动</a>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}